import React from 'react'
import {useNavigate} from 'react-router-dom'
import {useLocation} from 'react-router-dom'
import {useRef} from 'react'
import {setSearchID, setSearchListSong} from '../store/searchSlice'
import {useDispatch} from 'react-redux'
import {useSelector} from 'react-redux'
import {reqGetList} from '../api/api'
export default function Header() {
    const {searchList}=useSelector(state=>state)
    const dispatch=useDispatch()
    const inputValue = useRef(null)
    let {pathname} = useLocation()
    const {searchID} = useSelector(state => state.searchList)
    const navigate = useNavigate()
    const onClickSearchValue = () => {

        if (pathname !== '/hotsearch') {
            navigate('/hotsearch')
        }
    }
    const onChangeSearchValue = () => {
     dispatch(setSearchID(inputValue.current.value))
}
    const getList = () => {
        let MusicSearch =async ()=>{
            let result = await reqGetList(searchID)
            dispatch(setSearchListSong(result.data.result.songs))
            return ()=>{}
        }
        MusicSearch()
    }


return (
    <div className="top_big">
        <div className="top">
            <i className="iconfont font22"><img src="./img/top-01.png" /></i>
            <input type="text" className="iconfont font22" value={searchList.searchID} ref={inputValue} onChange={onChangeSearchValue}
                   onClick={onClickSearchValue} placeholder="&#xe6e7;&nbsp;&nbsp;搜索音乐、歌词、电台"/>
            <i className="iconfont font22" onClick={getList} ><img src="img/top-02.png" /></i>
        </div>
    </div>
)
}
